<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
    子组件传递参数到父组件
        props : 单向数据流    只能从父组件传递参数到子组件  反之不行
        自定义事件   @changsize
        自定义事件的名称定义规则:
           不同于组件和 prop，事件名不存在任何自动化的大小写转换。
           而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件

           不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，
           所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写
           (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
            因此，我们推荐你始终使用 kebab-case 的事件名。

-->
<div id="app">
    <div :style="{fontSize:size+'px',color:'#ff6700'}">
        <blog-title :blog="blog" @chang-size="changeFontSize"></blog-title>
    </div>

</div>

<script>
    // 博客组件
    const blogTitle = {
        template: `
          <div>
            <p>{{ blog.title }} :{{ blog.author }}</p>
            <button @click="changSize">改变博客字体大小</button>
          </div>
        `,
        methods: {
            changSize() {
                console.log('子组件中的单击事件被触发')
                // 改变父组件中size的值     调用  父组件中的  changeFontSize(num)  this.$emit(事件名,参数)
                this.$emit('chang-size', 50)
            }
        },
        props: ['blog'],
        data() {
            return {
                size: 30
            }
        }
    }
    let vm = new Vue({
        el: '#app',
        data: {
            size: 40,
            blog: {
                title: '第一篇博客',
                author: 'tom'
            },
        },
        methods: {
            // 改变字体大小
            changeFontSize(num) {
                console.log('子组件传递的参数num=', num)
                this.size = this.size + num
            }
        },
        components: {
            'blog-title': blogTitle
        }
    })
</script>

</body>
</html>
